Recall that devtools.js is basically the "background" of all devtools presentations (panel and sidebar), so it's great for onMessage.
This tutorial will re-emphasis this because the previous tutorials for DevTools Panel/Sidebar covered a lot of content.
---
### Create icon sets
You should know how. But if you need a review: [[2a. Chrome extension foundational with popup]] for section "manifest.json Icons"
### Create manifest.json:
```
{
"name": "DevTools Chrome Extension",
"description": "By Weng Fei Fung. Various demo's to teach you how to build a chrome extension to enhance the DevTools that web developers use.",
"manifest_version": 3,
"version": "1.0",
"icons": {
"16": "icon16x16.png",
"32": "icon32x32.png",
"48": "icon48x48.png",
"128": "icon128x128.png"
},
"content_security_policy": {
"extension_pages": "default-src 'self'; script-src 'self'; object-src 'self'; style-src 'self'; img-src 'self' *; connect-src 'self'"
},
"permissions": [
"activeTab",
"tabs"
],
"devtools_page": "devtools.html"
}
```
### Create devtools.html entry point:
```
```
### Create devtools.js, second point from entry:
```
//#region DevTools Panel: Init and capture globally
let panelWindow;
chrome.devtools.panels.create("DevTools_Panel", "icon.png", "devt-panel.html", panel => {
// Code invoked on panel creation
panel.onShown.addListener((window) => {
panelWindow = window;
}); // shown panel
});
//#endregion
//#region DevTools Sidebar: Init and capture globally
let sidebar = null;
chrome.devtools.panels.elements.createSidebarPane("DevTools_Sidebar", (mySidebar) => {
// Set the HTML file for the sidebar
mySidebar.setPage('devt-sidebar.html');
// Code invoked on panel creation
mySidebar.onShown.addListener((sidebarWindow) => {
console.log("DevTools_Sidebar is shown");
sidebar = sidebarWindow;
});
// Log when the sidebar is hidden
mySidebar.onHidden.addListener(() => {
console.log("DevTools_Sidebar is hidden");
});
});
//#endregion
//#region Listeners for messages from the panel and sidebar
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
switch (request.type) {
case "dvtp2dvt-write":
panelWindow.document.querySelector("#global-write").innerHTML = "Written!";
sendResponse("Written!!");
break;
case "dvtsp2dvt-write":
sidebar.document.querySelector("#global-write").innerHTML = "Written..!";
sendResponse("Written..!!");
break;
} // switch
});
//#endregion
```
^ Can you read what's going on?
### Create devt-panel.html:
```
DevTools Panel
DevTools Panel
This panel here is devt-panel.js
devt-panel.js locally writes here: ..
devtools.js globally writes here: .. devtools.js globally sends via callback, devt-panel.js receives via callback and then writes locally here: ..
```
### Create devt-panel.js:
```
document.querySelector("#local-write").innerHTML = "Written";
document.querySelector("#btn-emit").addEventListener("click", () => {
chrome.runtime.sendMessage({type:"dvtp2dvt-write"}, (response) => {
document.querySelector("#response-local-write").innerHTML = response;
});
});
```
^ Can you read what's going on? What does it anticipate the user to do? How does the chrome extension behave in response to the user's action?
### Create devt-sidebar.html:
```
DevTools Sidebar
DevTools Sidebar
This window here is devt-sidebar.js
devt-sidebar.js locally writes here: ..
devtools.js globally writes here: .. devtools.js globally sends via callback, devt-sidebar.js receives via callback and then writes locally here: ..
```
### Create devt-sidebar.js:
```
document.querySelector("#local-write").innerHTML = "Written..";
document.querySelector("#btn-emit").addEventListener("click", () => {
chrome.runtime.sendMessage({type:"dvtsp2dvt-write"}, (response) => {
document.querySelector("#response-local-write").innerHTML = response;
});
});
```
^ Can you read what's going on? What does it anticipate the user to do? How does the chrome extension behave in response to the user's action?
## Double check
Your folder structure should look like:
```
.
├── devt-panel.html
├── devt-panel.js
├── devt-sidebar.html
├── devt-sidebar.js
├── devtools.html
├── devtools.js
├── icon.png
├── icon128x128.png
├── icon16x16.png
├── icon32x32.png
├── icon48x48.png
└── manifest.json
```
---
## Testing and learning
Install chrome extension. Open Panel and/or Sidebar from DevTools. See what's written along with loading the page. See what's written after pressing the button at DevTools Panel or DevTools Sidebar. See if you can explain what's going on:
- what user is doing
- what app is doing
- what file sends a message
- what file receives a message
- who is writing to who